<template>
  <div class="activity">
    <el-form :inline="true" :model="searchData" class="demo-form-inline">
      <el-form-item>
				<el-input v-model="searchData.orderNo" placeholder="拼团商品订单编号" clearable></el-input>
			</el-form-item>
      <el-form-item>
				<el-select v-model="searchData.status" placeholder="拼团状态" clearable>
					<el-option label="待成团" value="0"></el-option>
					<el-option label="待开团" value="1"></el-option>
					<el-option label="拼团成功" value="2"></el-option>
					<el-option label="拼团失败" value="3"></el-option>
				</el-select>
			</el-form-item>
      <el-form-item>
        <el-date-picker 
          clearable
          v-model="date"
          type="daterange"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          range-separator="至"
          start-placeholder="参团开始日期"
          end-placeholder="参团结束日期" 
          >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
				<el-button type="primary" @click="onSearch" icon="el-icon-search">搜索</el-button>
			</el-form-item>
    </el-form>
    
    <el-button class="back-btn" type="primary" @click="back">返回拼团子列表</el-button>
    <el-table v-loading="loading" :data="tableData" style="width: 100%" border>
        <el-table-column label="头像" align="center" width="80px">
          <template slot-scope="scope">
            <el-image :src="scope.row.icon" style="width:30px;border-radius: 50%"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="nickName" label="参团用户昵称" align="center" width="150px"></el-table-column>
        <el-table-column prop="orderNo" label="拼团商品订单编号" align="center" width="150px"></el-table-column>
        <el-table-column prop="rewardPrice" label="红包奖励" align="center"  width="110px"></el-table-column>
        <el-table-column prop="createDate" label="参团时间" align="center"></el-table-column>
        <el-table-column label="拼团状态" align="center">
          <template slot-scope="scope">
            <div>{{statusText[scope.row.status]}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="openTime" label="开团时间" align="center"></el-table-column>
        <el-table-column label="成团起止时间" align="center" width="320px">
          <template slot-scope="scope">
            {{scope.row.cloudsStartTime}} 至 {{scope.row.cloudsEndTime}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="320px">
          <template slot-scope="scope">
            <el-button v-show="scope.row.status == 3" type="text" @click="viewRed(scope.row)">查看红包领取详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination :page-size="searchData.size" :current-page="searchData.page" layout="prev, pager, next,total,jumper"
        :total="total" background @current-change="handleCurrentChange">
        </el-pagination>
      </div>
      <el-dialog title="红包领取详情" :visible.sync="detailDialog" width="30%">
      <el-form ref="formSpell" style="margin-top:20px" label-position="right" label-width="150px">
        <el-form-item v-show="redDetail.rewardType !== 3" label="红包余额">
          <div>{{redDetail.balance}}</div>
        </el-form-item>
        <el-form-item label="领取到期时间">
          <div>{{redDetail.expireTime}}</div>
        </el-form-item>
        <el-form-item label="领取红包状态">
            <div>{{receiveStatusText[redDetail.receiveStatus]}}</div>
        </el-form-item>
        <el-form-item label="红包提现失败原因" v-if="redDetail.receiveStatus == 2">
            <div>{{redDetail.rpGetReason}}</div>
        </el-form-item>
        <el-form-item v-show="redDetail.rewardType !== 3" label="待提现金额">
            <div>{{redDetail.transferPrice}}元</div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      detailDialog: false,
      redDetail: {},
      loading: false,
      tableData: [],
      total: 0,
      searchData: {
        orderNo: '',
        status: '',
        page: 1,
        size: 10
      },
      statusText: {
        0: '待成团',
        1: '待开团',
        2: '拼团成功',
        3: '拼团失败'
      },
      date: [],
      pickerOptions: {
        disabledDate:time=>{
            return time.getTime() > new Date().getTime()  + 24 * 60 * 60 * 1000
        },
      },
      receiveStatusText: {
        0: '未领取',
        1: '领取成功',
        2: '提现失败',
        4: '已提现'
      }
    }
  },
  mounted () {
    this.searchData.subSgId = this.$route.query.id;
    this.getData()
  },
  methods: {
    viewRed(row){
      this.detailDialog = true;
      row.redPacketInfo.rewardType = row.rewardType
      this.redDetail = row.redPacketInfo;
    },
    back() {
      this.$router.go(-1)
    },
    getData() {
      this.loading = true;
      this.searchData.startDate = this.date.length>0 ? this.date[0] : '';
      this.searchData.endDate = this.date.length>0 ? this.date[1] : '';
      this.$http.get(this.$api.spellGroupUserList, this.searchData).then(res => {
          this.tableData = res.data;
          this.total = res.extraInfo;
          this.loading = false;
      })
    },
    onSearch() {
      this.searchData.page = 1;
      this.getData();
    },
    handleCurrentChange(val) {
        this.searchData.page = val;
        this.getData();
    },
  }
}
</script>
<style scoped>
	.activity {
		padding: 15px;
	}

	.pages {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30px;
	}
  .back-btn {
    margin-bottom: 15px;
  }
</style>